<template>
  <div class="login">
    <h2>供应链金融管理平台</h2>
    <el-form class="form" :model="form" :rules="rules" ref="formref">
      <el-form-item prop="adminname">
        <el-input v-model="form.adminname" placeholder="输入账号" />
      </el-form-item>
      <el-form-item prop="password">
        <el-input v-model="form.password" placeholder="输入密码" />
      </el-form-item>
      <el-form-item>
        <el-button class="btn" type="primary" @click="onSubmit(formref)"
          >登陆</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>
<script setup >
// import { loginlink } from "@/apis/Login.ts";
import { ref } from "vue";
import { ElNotification } from "element-plus";
import "element-plus/es/components/notification/style/css";
import { useUserInfoStore } from "@/stores/userinfo";
import { useRouter } from "vue-router";

var userInfoStore = useUserInfoStore();
var router = useRouter();

var form = ref({ adminname: "", password: "" });
var formref = ref();
const rules = {
  adminname: [{ required: true, message: "请输入账号", trigger: "change" }],
  password: [{ required: true, message: "请输入密码", trigger: "change" }],
};
var onSubmit = (formEl) => {
  // console.log(from.value);
  // console.log(formEl);
  loginlink(form.value).then((ok) => {
    console.log(ok);
    if (ok.data.code == 200) {
      //提示"登陆成功!"
      ElNotification.closeAll();
      ElNotification.success({ message: "登陆成功!" });

      //保存用户信息
      userInfoStore.save_userinfo(ok.data.data);

      //跳转到首页
      router.push("/index");
    } else {
      //提示"登陆失败!"
      ElNotification.closeAll();
      ElNotification.error({ message: "登陆失败!" });
    }
  });
};
</script>
  <style scoped>
.login {
  height: 100%;
  background: url(../assets/login_bg.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login h2 {
  text-align: center;
  margin-bottom: 20px;
}
.login .form {
  min-width: 300px;
  background-color: white;
  padding: 30px;
  border-radius: 10px;
}
.login .form .btn {
  width: 100%;
}
</style>